<template>
  <div class="Catalog" @click="goCatalogList(tag.id)">
      <span class="catalog-icon" :style="{backgroundImage: 'url('+tag.pic+')'}"></span>
      <span class="title">{{tag.title}}</span>
  </div>
</template>

<script>
export default {
    props:['tag'],
    methods:{
        goCatalogList(id){
        this.$router.push({
            name:'catalog',
            params:{
            id
            }
        })
        }
    }
}
</script>

<style lang="stylus" scoped>
.Catalog
    display flex
    align-items center
    flex-direction column
    height 1.04rem
    margin-bottom .1rem
    border-radius .04rem
    background-color #fff
    width calc((100% - 0.2rem) / 3)
    box-shadow: 0 .01rem .01rem 0 rgba(0,0,0,.2);
    .catalog-icon
        display: block;
        height: 50px;
        width: 50px;
        margin: 15px auto 8px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size 100%
    .title
        font-size: .14rem;
        color: #000;
</style>